import React from 'react'
import { NavLink } from 'react-router-dom'

import './index.css'
export default function MusicNav(props) {
  const { title, detail } = props
  function computerClassName({ isActive }) {
    return isActive ? 'myActive munlist' : 'munlist'
  }
  const list = detail.map((data) => {
    return <NavLink className={computerClassName} 
    key={data.id} 
    to={data.path} 
    >{data.icon}{data.name}</NavLink>
  })

  return (
    <div className='music_nav'>
      <span style={{ fontSize: "16px", color: "#999" }}>{title}</span>
      <ul>{list}</ul>
    </div>
  )
}


